<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            box-sizing:border-box;
        }
        html,body{
            padding: 0;
            margin: 0;
            height: 100%;
            font-size: 100px;
        }
        main{
            background-image: url("image/686889267451709381.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
            width: 7.5rem;
            height: 100vh;
            margin: 0 auto;
            padding: 60vh 0 0 0 ;
        }
        section{
            background-image: url("image/form.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
            width: 6.5rem;
            height: 40vh;
            margin: 0 auto;
            padding-top: 2vh;
        }
        #picture{
            width: 90%;
            height: 13vh;
            margin: 0 auto;
            padding-top: 2vh;
        }
        #input-group{
            width: 90%;
            height: 23vh;
            /*border: solid 1px red;*/
            margin: 0 auto;
        }
        #picture img{
            float: left;
        }
        #picture img:nth-of-type(1){
            width: 25%;
            height: 13vh;
           margin-left:10%;
        }
        #picture img:nth-of-type(2){
            width:40%;
            height: 13vh;
            margin-left:12%;

        }
        .input{
            background-image: url("image/input.png");
            background-repeat: no-repeat;
            background-size: 100% 135%;
            background-position: center;
            width: 100%;
            height: 5vh;
            margin: 0.05rem auto;
            float: left;
            border: none;
            outline: none;
            padding-left: 0.5rem;
            /*border: solid 1px red;*/

        }
        #send-group{
            position: relative;
            width: 100%;
            height: 5vh;
            float: left;
        }
        #send{
            position: absolute;
            top: 1.3vh;
            right:0.4rem;
            border-radius: 10px;
            border: none;
            width: 80px;
            height: 3vh;
            font-size: 0.14rem;
            padding: 0;
        }

         #button{
            width: 90%;
            height: 6vh;
            /*border: solid 1px red;*/
            margin: 2vh 0 0 0.3rem;
            float: left;
             text-align: center;
        }
         a{
            font-size: 0.16rem;
        }
        .layui-layer-btn{
            height: 30px;
        }
        #part2{
            background-image: url("image/bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
            width: 7.5rem;
            height: 100vh;
            margin: 0 auto;
            padding: 1.41rem 0 0 0 ;
            text-align: center;
        }
        #obj{
            width: 3.05rem;
        }
        .download{
            width:5.93rem;
            float: left;
            margin-top: 0.32rem ;
            margin-left: calc((100% - 5.93rem)/ 2);
        }
        @media only screen and (min-device-width: 320px){
        /*//针对iPhone 3*/
            html{
                font-size: 42.6px;
            }
        }
        @media only screen and (min-device-width: 360px){
            /*//针对iPhone 3*/
            html{
                font-size: 48px;
            }
        }
        @media only screen and (min-device-width: 375px) {
        /*//针对大多数iPhone6的标准模式*/
            html{
                font-size: 50px;
            }
        }
        @media only screen and (min-device-width:412px)  {
        /*//针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理*/
            html{
                font-size: 55.2px;
            }
        }
        @media only screen and (min-device-width:568px) {
            /*//针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理*/
            html{
                font-size: 75.7px;
            }
            main{
                height: 200vh;
                padding-top:120vh;
            }
            #part2{
                height: 200vh;
            }
            section{
                height: 60vh;
            }
            .input{
                height: 10vh;
            }
            #button{
                height: 12vh;
                margin-top: 8vh;
            }
            #send{
                top: 2.6vh;
                height: 6vh;
            }

        }
        @media only screen and (min-device-width:667px)  {
            /*//针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理*/
            html{
                font-size: 88.9px;
            }
            main{
                height: 200vh;
                padding-top:120vh;
            }
            #part2{
                height: 200vh;
            }
            section{
                height: 60vh;
            }
            .input{
                height: 10vh;
            }
            #button{
                height: 12vh;
                margin-top: 8vh;
            }
            #send{
                top: 2.6vh;
                height: 6vh;
            }

        }
        @media only screen and (min-device-width:736px)  {
            /*//针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理*/
            html{
                font-size: 98.1px;
            }
            main{
                height: 200vh;
                padding-top:120vh;
            }
            #part2{
                height: 200vh;
            }
            section{
                height: 60vh;
            }
            .input{
                height: 10vh;
            }
            #button{
                height: 12vh;
                margin-top: 8vh;
            }
            #send{
                top: 2.6vh;
                height: 6vh;
            }

        }
        @media only screen and (min-device-width:750px) {
            html{
                font-size: 102px;
            }
            main{
                height: 150vh;
                padding-top:90vh;
            }
            #part2{
                height: 150vh;
            }
        }
    </style>
</head>
<body>

<main>
    <section>
        <div id="picture">
            <img src="image/hb_item.png" alt="">
            <img src="image/word.png" alt="">
        </div>
        <div id="input-group">
            <input class="input" id="phone" type="text" placeholder="请输入手机号码">

            <div id="send-group">
                <input class="input" id="num" type="text" placeholder="请输入验证码">
                <input type="button" id="send" value="发送验证码">
            </div>
                <img id="button" src="image/button.png" alt="">
        </div>
    </section>
</main>

<section id="part2">
    <img src="image/obj.png" alt="" id="obj">
    <img src="image/and.png" alt="" class="download">
    <img src="image/ios.png" alt="" class="download">

</section>

<script src="layer/jquery-3.2.1.min.js"></script>
<script src="layer/layer.js"></script>
<script>
    $('#button').click(function () {
        layer.alert(
            "领取成功！O(∩_∩)O哈哈~", {icon: 6}
        )
    })

    var wait =60
    function time(o) {
        if (wait == 0){
            o.removeAttribute("disabled")
            o.value="发送验证码"
            wait=60
        }else {
            o.setAttribute("disabled",true)
            o.value= wait + "s"
            wait --
            setTimeout(function () {
                time(o)
            },1000)
        }

        }
    document.getElementById("send").onclick =function () {
        time(this)
    }
</script>
</body>
</html>